<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<form action="houtai.php" method="post">
    <p><label for="">用户名:<input type="text" name="name"></label></p>
    <p><label for="">密码:<input type="password" name="pass1"></label></p>
    <p><label for="">确认密码:<input type="password" name="pass2"></label></p>
    <p>
        <button type="submit" id="submit">注册</button>
    </p>
</form>
<script>
    let bet = document.getElementById('submit')//通过ID绑定组件
    bet.onclick = function (ev) {//组件点击时间
        let name = document.getElementsByName('name')[0].value//通过标签名称获取组件的值
        let pass1 = document.getElementsByName('pass1')[0].value
        let pass2 = document.getElementsByName('pass2')[0].value
        let data = 'name=' + name + '&pass1=' + pass1 + '&pass2=' + pass2//拼接要发送的数据

        let xhr = new XMLHttpRequest()
        /*监听服务器返回的数据*/
        xhr.onreadystatechange = function (ev) {
            /* =4表示当前请求完成 , =200成功返回数据*/
            if (this.readyState === 4 && this.status === 200) {
                //alert(data)//调试打印
                let tips4 = document.getElementById('tips4')
                tips4.innerHTML = xhr.responseText

                setTimeout(function () {
                    location.href='index.html'
                },2000)
            }
        }
        xhr.open('POST', 'houtai.php?lx = zhuce', true)//请求方式,POST与GET混合发送
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')//设置请求头,就是数据的编码方式
        xhr.send(data)//发送到服务端
        return false //禁用按键的跳转动作

    }
</script>
</body>
</html>